<template>
  <Common   :sidebar="false">
    <div class="hero" :style="{ ...bgImageStyle }">
      <component v-if="bubbles" :is="bubbles" :options="options" ></component>
    </div>
  <div class="tags-wrapper">
    <!-- 标签集合 -->
    <ModuleTransition>
      <TagList
              v-show="recoShowModule"
              :currentTag="currentTag"
              @getCurrentTag="tagClick"></TagList>
    </ModuleTransition>

    <!-- 博客列表 -->
    <ModuleTransition delay="0.08">
      <note-abstract
              v-show="recoShowModule"
              class="list"
              :data="$recoPosts"
              :currentPage="currentPage"
              :currentTag="currentTag"
              @currentTag="getCurrentTag"></note-abstract>
    </ModuleTransition>

    <!-- 分页 -->
    <ModuleTransition delay="0.16">
      <pagation
              class="pagation"
              :total="$recoPosts.length"
              :currentPage="currentPage"
              @getCurrentPage="getCurrentPage"></pagation>
    </ModuleTransition>
  </div>

  </Common>
</template>

<script>
import Common from '@theme/components/Common'
import TagList from '@theme/components/TagList'
import NoteAbstract from '@theme/components/NoteAbstract'
import pagination from '@theme/mixins/pagination'
import ModuleTransition from '@theme/components/ModuleTransition'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'

export default {
  mixins: [pagination, moduleTransitonMixin],
  components: { Common, NoteAbstract, TagList, ModuleTransition },
  data () {
    return {
      tags: [],
      currentTag: '',
      currentPage: 1,
      allTagName: '',
      bubbles:null,
    }
  },

  created () {
    this.currentTag = this.$recoLocales.tag.all
    this.allTagName = this.$recoLocales.tag.all
    if (this.$tags.list.length > 0) {
      this.currentTag = this.$route.query.tag ? this.$route.query.tag : this.currentTag
    }
  },

  mounted () {
    import('vue-canvas-effect/src/components/bubbles').then(module=>{
      this.bubbles=module.default
    }),
    this._setPage(this._getStoragePage())
  },
  computed: {
    options(){
      return{
        color: 'rgba(225,225,225,0.5)', //Bubble color
        radius: 15, //Bubble radius
        densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
        clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
      }
    },
    bgImageStyle () {
      let random_bg=Math.floor(Math.random()*19+1)
      const initBgImageStyle = {
        textAlign: 'center',
        overflow: 'hidden',
        background: 'url(/img/'+random_bg+'.jpg) center/cover no-repeat'
      }
      const {
        bgImageStyle
      } = this.$frontmatter

      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
    },
  },
  methods: {

    tagClick (tagInfo) {
      if (this.$route.path !== tagInfo.path) {
        this.$router.push({ path: tagInfo.path })
      }
    },

    getCurrentTag (tag) {
      this.$emit('currentTag', tag)
    },

    getCurrentPage (page) {
      this._setPage(page)
      setTimeout(() => {
        window.scrollTo(0, 0)
      }, 100)
    },
    _setPage (page) {
      this.currentPage = page
      this.$page.currentPage = page
      this._setStoragePage(page)
    }
  }
}
</script>

<style src="../styles/theme.styl" lang="stylus"></style>

<style lang="stylus" scoped>
.hero {
  position relative
  box-sizing border-box
  padding 0 20px
  height 50vh
  display flex
  align-items center
  justify-content center
  .hero-img {
    max-width: 300px;
    margin: 0 auto 1.5rem
  }

  h1 {
    display: block;
    margin:0 auto 1.8rem;
    font-size: 2.5rem;
  }

  .description {
    margin: 1.8rem auto;
    font-size: 1.6rem;
    line-height: 1.3;
  }
}
.tags-wrapper
  max-width: $contentWidth
  margin: 0 auto;
  padding: 0rem 2.5rem 0;

@media (max-width: $MQMobile)
  .tags-wrapper
    padding: 5rem 0.6rem 0;
</style>
